<template>
    <div class="container" :style="'height: '+docheight+'px'">
      <leftcont></leftcont>
      <div class="righCont">
        <topcont></topcont>
        <div class="cardCont">
          <div class="carItem">
            <div class="carName">订单总金额</div>
            <div class="carText">{{ allData.order_money }}元</div>
          </div>
          <div class="carItem">
            <div class="carName">累计提现</div>
            <div class="carText">{{ allData.withdrawal_money }}元</div>
          </div>
          <div class="carItem">
            <div class="carName">平台总收益</div>
            <div class="carText">{{ allData.income_money }}元</div>
          </div>
        </div>
        <div class="content">
          <div class="payTable">
            <div class="trendTop">
              <div>订单列表({{ total }})</div>
            </div>
            <div class="tableCont">
                <div class="tableSerchCont">
                    <div class="serchItem">
                        <el-date-picker
                            v-model="serchTime"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions">
                        </el-date-picker>
                    </div>
                    <div class="serchItem">
                      <el-select v-model="is_examine" placeholder="请审核状态">
                          <el-option
                              v-for="(item,index) in expArr"
                              :key="index"
                              :label="item.val"
                              :value="item.id">
                          </el-option>
                      </el-select>
                    </div>
                    <div class="serchItem">
                      <el-select v-model="order_status" placeholder="请选择状态">
                          <el-option
                              v-for="(item,index) in navArr"
                              :key="index"
                              :label="item.val"
                              :value="item.id">
                          </el-option>
                      </el-select>
                    </div>
                    <div class="serchItem" style="width: 250px;">
                        <el-input v-model="techName" placeholder="课程名称｜订单号｜教师姓名"></el-input>
                    </div>
                    <div class="serchItem">
                        <btn @click="serchFn" value="搜索"></btn>
                    </div>
                </div>
              <el-table
                :data="orderList"
                style="width: 100%">
                <el-table-column
                  prop="order_number"
                  width="200"
                  show-overflow-tooltip
                  label="订单号"
                >
                </el-table-column>
                <el-table-column
                  prop="take_time"
                  show-overflow-tooltip
                  label="订单状态"
                >
                <template slot-scope="scope">
                    <div class="ctrolBtn">
                        <div class="text_btn blueBtn" v-if="scope.row.order_status==1">待付款</div>
                        <div class="text_btn blueBtn" v-if="scope.row.order_status==2">待接单</div>
                        <div class="text_btn blueBtn" v-if="scope.row.order_status==3">待服务</div>
                        <div class="text_btn greenBtn" v-if="scope.row.order_status==5">已完成</div>
                        <div class="text_btn balckBtn" v-if="scope.row.order_status==6">已关闭</div>
                        <div class="text_btn balckBtn" v-if="scope.row.order_status==7">已退款</div>

                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="course_name"
                    show-overflow-tooltip
                    label="课程名称"
                >
                </el-table-column>
                <el-table-column
                  prop="order_total_price"
                  show-overflow-tooltip
                  label="订单总金额"
                >
                </el-table-column>
                <el-table-column
                  prop="order_total_price"
                  show-overflow-tooltip
                  label="服务规格"
                >
                <template slot-scope="scope">
                  <div class="ctrolBtn">
                      <div>{{ scope.row.num }}{{ getUnit(scope.row) }}</div>
                  </div>
                </template>
                </el-table-column>
                <el-table-column
                  prop="order_total_price"
                  show-overflow-tooltip
                  label="打卡记录"
                >
                <template slot-scope="scope">
                  <div class="ctrolBtn">
                      <div>{{ scope.row.clock_num }}/{{ scope.row.num }}</div>
                  </div>
                </template>
                </el-table-column>
                <el-table-column
                  prop="teacher_name"
                  show-overflow-tooltip
                  label="项目教师"
                >
                </el-table-column>
                <el-table-column
                  prop="create_time"
                  show-overflow-tooltip
                  label="创建时间"
                >
                </el-table-column>
                <el-table-column
                  label="操作">
                  <template slot-scope="scope">
                    <div class="ctrolBtn">
                      <div class="text_btn blueBtn" v-if="scope.row.is_examine==1&&scope.row.order_status==2" @click="passFn(scope.row)">审核</div>
                        <div class="text_btn greenBtn" @click="toDetailFn(scope.row)">详情</div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pageCont">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :page-size="per_page"
                  @current-change="pageFn"
                  :current-page="page"
                  :total="total">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
    import leftcont from '@/components/leftCont.vue'
    import topcont from '@/components/topCont.vue'
    import btn from '@/components/public/btn.vue'
    import {order,statistics,orderExamine} from "@/http/api";
  
    export default {
      components: {leftcont,topcont,btn},
      data() {
        return {
        pickerOptions: {
        shortcuts: [{
            text: '最近一周',
            onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
            }
        }, {
            text: '最近一个月',
            onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
            }
        }]
        },
          orderList: [],
          serchTime:'',
          techName:'',
          page:1,
          per_page:5,
          allData:'',
          total:0,
          showLoad:false,
          navArr:[
            {val:'全部',id:''},
            {val:'待付款',id:1},
            {val:'待接单',id:2},
            {val:'待服务',id:3},
            {val:'已完成',id:5},
            {val:'已关闭',id:6},
            {val:'已退款',id:7},
         ],
         expArr:[
            {val:'全部',id:''},
            {val:'未审核',id:1},
            {val:'已审核',id:2},
         ],
         is_examine:1,
         order_status:'',
        }
      },
      props: {},
      methods:{
        getUnit(item){
          if(item.course_unit==1){
              return '小时'
          }else if(item.course_unit==2){
              return '课时'
          }
        },
        getTime(time){
            let n = time.getFullYear()
            let y = time.getMonth()+1
            let d = time.getDate()
            let timeStr = n+'-'+y+'-'+d
            return timeStr
        },
        toDetailFn(item){
            this.$router.push({path:'/userCenterOrderDetail',query:{id:item.order_id}})
        },
        passFn(item){
          this.$confirm('确定通过此订单吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let data ={
                order_id:item.order_id,
              }
              const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(255, 255, 255, 0.7)'
              });
              orderExamine(data).then((res)=>{
                if(res.data.code==1){
                  this.$message({
                    type: 'success',
                    message: res.data.msg
                  });
                  this.getData()
                }else{
                  this.$message(res.data.msg)
                }
                loading.close()
              }).catch((err)=>{
                loading.close()
                this.$message('服务器请求超时');
              })
            })
        },
        pageFn(index){
          this.page= index
          this.getData()
        },
        serchFn(){
            this.orderList = []
            this.page = 1
            this.getData()
        },
        getData(){
            let time = ''
            if(this.serchTime!=null&&this.serchTime.length>0){
              time = this.getTime(this.serchTime[0])+','+this.getTime(this.serchTime[1])
            }
            let data ={
                search:this.techName,
                order_status:this.order_status,
                per_page:this.per_page,
                page:this.page,
                is_examine:this.is_examine,
                time:time,
            }
            order(data).then((res) =>{
            if(res.data.code==1){
              this.orderList = res.data.data.data
              this.total =res.data.data.total
            }else{
              this.$message(res.data.msg)
            }
        }).catch((err)=>{
          this.$message('服务器请求超时');
        })
      },
      getAllData(){
        statistics().then((res) =>{
            if(res.data.code==1){
              this.allData = res.data.data
            }else{
              this.$message(res.data.msg)
            }
        }).catch((err)=>{
          this.$message('服务器请求超时');
        })
      },
      },
      mounted(){
      },
      created() {
        this.getData()
        this.getAllData()
      },
    }
  </script>
  
  <style scoped lang="less">
    .container{
      width: 100%;
      display: flex;
      overflow: hidden;
      .righCont{
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-left: 15px;
        height: 100%;
        width: 10px;
        background-color: #F4F8FF;
        .cardCont{
          padding: 15px 20px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          .carItem{
            width: 28%;
            background-color: #fff;
            border-radius: 5px;
            padding: 15px;
            box-sizing: border-box;
            .carName{
            }
            .carText{
              margin-top: 5px;
              font-weight: bold;
              font-size: 20px;
            }
          }
        }
        .content{
          padding: 20px;
          padding-top: 0px;
          box-sizing: border-box;
          width: 100%;
          flex: 1;
          overflow: auto;
          .payTable{
            width: 100%;
            background-color: #fff;
            padding: 15px;
            box-sizing: border-box;
            .trendTop{
              font-weight: bold;
              font-size: 16px;
              cursor: pointer;
            }
            .tableCont{
              width: 100%;
              margin-top: 15px;
              .tableSerchCont{
                width: 100%;
                display: flex;
                justify-content: flex-end;
                margin-bottom: 10px;
                .serchItem{
                  margin-left: 10px;
                }
              }
              .ctrolBtn{
                display: flex;
                .text_btn{
                  margin: 0 5px;
                  cursor: pointer;
                  font-size: 14px;
                }
                .balckBtn{
                    color: #666;
                }
                .redBtn{
                  color: #F56C6C;
                }
                .blueBtn{
                  color: #96A1FE;
                }
                .greenBtn{
                  color: #85CE61;
                }
  
              }
              .pageCont{
                padding: 30px 0;
                display: flex;
                justify-content: center;
              }
            }
          }
        }
      }
    }
  </style>
  